<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>霓虹灯下社区- 好友 </title>
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta content="telephone=no" name="format-detection">
    <link rel="shortcut icon" href="/favicon.ico">
    <link href="/static/app/css/style.css" rel="stylesheet" type="text/css">
    <link href="/static/app/css/chatroom.css" rel="stylesheet" type="text/css">
    <script>
    !function(t,e){var o,n,p,r;e.__SV||(window.posthog=e,e._i=[],e.init=function(i,s,a){function g(t,e){var o=e.split(".");2==o.length&&(t=t[o[0]],e=o[1]),t[e]=function(){t.push([e].concat(Array.prototype.slice.call(arguments,0)))}}(p=t.createElement("script")).type="text/javascript",p.async=!0,p.src=s.api_host+"/static/array.js",(r=t.getElementsByTagName("script")[0]).parentNode.insertBefore(p,r);var u=e;for(void 0!==a?u=e[a]=[]:a="posthog",u.people=u.people||[],u.toString=function(t){var e="posthog";return"posthog"!==a&&(e+="."+a),t||(e+=" (stub)"),e},u.people.toString=function(){return u.toString(1)+".people (stub)"},o="capture identify alias people.set people.set_once set_config register register_once unregister opt_out_capturing has_opted_out_capturing opt_in_capturing reset isFeatureEnabled onFeatureFlags".split(" "),n=0;n<o.length;n++)g(u,o[n]);e._i.push([i,s,a])},e.__SV=1)}(document,window.posthog||[]);
    posthog.init('phc_YbILrRYZIl1t07oBWTdspsTkGUFCVebFGrvfMxtkdU4',{api_host:'https://app.posthog.com'})
</script>
</head>
<body>
    
    <section class="aui-flexView">
        <header class="aui-navBar aui-navBar-fixed">
            <a href="javascript:history.go(-1);" class="aui-navBar-item">
                <i class="icon">
                    <svg t="1620971982591" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2989" width="48" height="48"><path d="M384 512L731.733333 202.666667c17.066667-14.933333 19.2-42.666667 4.266667-59.733334-14.933333-17.066667-42.666667-19.2-59.733333-4.266666l-384 341.333333c-10.666667 8.533333-14.933333 19.2-14.933334 32s4.266667 23.466667 14.933334 32l384 341.333333c8.533333 6.4 19.2 10.666667 27.733333 10.666667 12.8 0 23.466667-4.266667 32-14.933333 14.933333-17.066667 14.933333-44.8-4.266667-59.733334L384 512z" p-id="2990" fill="#ffffff"></path></svg>
                </i>
            </a>
            <div class="aui-center">
                <span class="aui-center-title">职业第三者</span>
            </div>
            <a href="javascript:;" class="aui-navBar-item">
                <i class="icon icon-sys"><svg t="1620965733846" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2989" width="48" height="48"><path d="M192 512m-64 0a64 64 0 1 0 128 0 64 64 0 1 0-128 0Z" p-id="2990" fill="#ffffff"></path><path d="M512 512m-64 0a64 64 0 1 0 128 0 64 64 0 1 0-128 0Z" p-id="2991" fill="#ffffff"></path><path d="M832 512m-64 0a64 64 0 1 0 128 0 64 64 0 1 0-128 0Z" p-id="2992" fill="#ffffff"></path></svg></i>
            </a>
        </header>
        <section class="aui-scrollView">
            <div class="chat-content">
                <object class="left">
                    <a href="javascript:;">
                        <div class="aui-flex fix-header-style detail-sub-comtent">
                            <div class="topic-user-img">
                                <object>
                                    <a href="404.html">
                                        <img src="/static/app/images/pd-001.png" alt>
                                    </a>
                                </object>
                            </div>
                            <div class="topic-user-box">
                                <h3>
                                    <object>
                                        <a href="404.html">职业第三者</a>
                                    </object>
                                </h3>
                                <div class="detail-sub-comment-content">
                                    <p>杨庄路是一条典型的通州街道，门脸窄小的SPA店.杨庄路是一条典型的通州街道.杨庄路是一条典型的通州街道，门脸窄小的SPA店.杨庄路是一条典型的通州街道</p>
                                </div>
                            </div>
                        </div>
                        
                    </a>
                </object>
                <object class="left">
                    <a href="javascript:;">
                        <div class="aui-flex fix-header-style detail-sub-comtent">
                            <div class="topic-user-img">
                                <object>
                                    <a href="404.html">
                                        <img src="/static/app/images/pd-001.png" alt>
                                    </a>
                                </object>
                            </div>
                            <div class="topic-user-box">
                                <h3>
                                    <object>
                                        <a href="404.html">职业第三者</a>
                                    </object>
                                </h3>
                                <div class="detail-sub-comment-content">
                                    <p>杨庄路是一条典型的通州街道，门脸窄小的SPA店.</p>
                                </div>
                            </div>
                        </div>
                        
                    </a>
                </object>


                <object class="right">
                    <a href="javascript:;">
                        <div class="aui-flex fix-header-style detail-sub-comtent">
                            <div class="topic-user-img">
                                <object>
                                    <a href="404.html">
                                        <img src="/static/app/images/pd-001.png" alt>
                                    </a>
                                </object>
                            </div>
                            <div class="topic-user-box">
                                <h3>
                                    <object>
                                        <a href="404.html">职业第三者</a>
                                    </object>
                                </h3>
                                <div class="detail-sub-comment-content">
                                    <p>杨庄路是一条典型的通州街道，门脸窄小的SPA店.杨庄路是一条典型的通州街道.杨庄路是一条典型的通州街道，门脸窄小的SPA店.杨庄路是一条典型的通州街道</p>
                                </div>
                            </div>
                        </div>
                        
                    </a>
                </object>
                <object class="right">
                    <a href="javascript:;">
                        <div class="aui-flex fix-header-style detail-sub-comtent">
                            <div class="topic-user-img">
                                <object>
                                    <a href="404.html">
                                        <img src="/static/app/images/pd-001.png" alt>
                                    </a>
                                </object>
                            </div>
                            <div class="topic-user-box">
                                <h3>
                                    <object>
                                        <a href="404.html">职业第三者</a>
                                    </object>
                                </h3>
                                <div class="detail-sub-comment-content">
                                    <p>杨庄路</p>
                                </div>
                            </div>
                        </div>
                        
                    </a>
                </object>

            </div>   
        </section>

        <footer class="aui-footer aui-footer-fixed">
            <div class="detail-bottom">
                <ul>
                    <li >
                        <input class="msg" type="text" placeholder="写回复">
                    </li>
                    <li class="send">
                        <i class="topic-icon">
                            <img src="/static/app/images/image.png">
                        </i>
                        <span id="ack" class="topic-icon" style="padding: 3px 10px;background-color: #28a63d;color: #ffffff;border-radius: 5px;display: none;">发送</span>
                    </li>
                    <li>
                        <i class="topic-icon">
                            <img src="/static/app/images/expression.png">
                        </i>
                    </li>
                    
                </ul>
            </div>
        </footer>
    </section>
</body>

<script type="text/javascript" src="/static/app/js/jquery.min.js"></script>
<script type="text/javascript" src="/static/app/js/slider.js"></script>
<script type="text/javascript">
    let canSend = false;
    $(function () {
        $('.detail-tab li').click(function(){
             indexC = $(this).index();
             console.log(indexC)
			$(this).addClass('active-title').siblings().removeClass('active-title');
			$('.detail-tab-comtent .detail-tab-comtent-item').eq(indexC).addClass('active-content').siblings().removeClass('active-content');
		})
    

        $(".msg").bind("input",function () {
            if($(this).val().length > 0){
                canSend = true;
                $(".send").children().hide();
                $(".send>span").show();
                
            } else {
                canSend = false;
                $(".send").children().hide();
                $(".send>i").show();
                
            }
        })


        // $(".msg").focus(function(){
        //     var message = $('.chat-content')
        //     console.log( $('.chat-content').outerHeight() - window.innerHeight + 15)
        //     $('.aui-scrollView').animate({
        //         scrollTop: message.outerHeight() - window.innerHeight
        //     }, 200);
        // })
    });
    </script>
    <script type="module" src="/static/websocket/im.js"></script>
    <script type="module" src="/static/websocket/websocket.js"></script>
    <!--
    <script type="module">
        $(function() {

            var websocket = null;

            var webSocket = CreateSocketConnection("ws://im.nihongdengxia.com/im","eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJodHRwOlwvXC9pbS5uaWhvbmdkZW5neGlhLmNvbVwvIiwiYXVkIjoiaHR0cDpcL1wvaW0ubmlob25nZGVuZ3hpYS5jb21cLyIsImlhdCI6MTYyMzAzNzE4NCwidXNlciI6MX0.7s0gxXlal1Hqbz9naKmlo2fgfNNmz_73jcfySSE4s-k");
            socketEvent(webSocket);


            $('#ack').click(send)
            $(".msg").keydown(function(e){
                if(e.keyCode == 13){
                    return send();
                }
            });
        })
        var arr = ['跟我聊会天吧'];
        test()
        function test() {
            $(arr).each(function(i) {
                setTimeout(function() {
                    reply("", arr[i])
                }, 500)
            })
        }

        function reply(headSrc, str) {
            var html = `<object class="left">
                    <a href="javascript:;">
                        <div class="aui-flex fix-header-style detail-sub-comtent">
                            <div class="topic-user-img">
                                <object>
                                    <a href="404.html">
                                        <img src="images/pd-001.png" alt>
                                    </a>
                                </object>
                            </div>
                            <div class="topic-user-box">
                                <h3>
                                    <object>
                                        <a href="404.html">职业第三者</a>
                                    </object>
                                </h3>
                                <div class="detail-sub-comment-content">
                                    <p>杨庄路是一条典型的通州街道，门脸窄小的SPA店.</p>
                                </div>
                            </div>
                        </div>
                        
                    </a>
                </object>`;
            return upView(html);
        }
        function ask(headSrc, str) {
            var html = `
                <object class="right">
                    <a href="javascript:;">
                        <div class="aui-flex fix-header-style detail-sub-comtent">
                            <div class="topic-user-img">
                                <object>
                                    <a href="404.html">
                                        <img src="images/pd-001.png" alt>
                                    </a>
                                </object>
                            </div>
                            <div class="topic-user-box">
                                <h3>
                                    <object>
                                        <a href="404.html">职业第三者</a>
                                    </object>
                                </h3>
                                <div class="detail-sub-comment-content">
                                    <p>`+str+`</p>
                                </div>
                            </div>
                        </div>
                        
                    </a>
                </object>`;
            return upView(html);
        }
        function upView(html) {
            let message = $('.chat-content');
            message.append(html);
            // console.log(message.outerHeight() - window.innerHeight)
            return $('.aui-scrollView').animate({
                scrollTop: message.outerHeight() - window.innerHeight + 15
            }, 200);
        }

        // function send(msg){
        //     if(canSend){
        //         let input = $(".msg");
        //         ask("", input.val());
        //         input.val('');
        //         test();
        //     }
        //     $(".msg")[0].focus();
        // }

    function send() {
        output(res, 'toMessage');
        // var s = {
        //     mine: i,
        //     to: a.data
        // }
        // var o = {
        //     username: s.mine.username,
        //     avatar: s.mine.avatar,
        //     id: s.to.id,
        //     type: s.to.type,
        //     content: s.mine.content,
        //     timestamp: (new Date).getTime(),
        //     mine: !0
        // };

        var o = {
            avatar: "https://s.gravatar.com/avatar/b04a7799bfc108fea09eef6270505090",
            content: "123",
            id: 1,
            mine: true,
            username: "chenli@qq.com",
        }
        var to = {
            "avatar":"https://s.gravatar.com/avatar/487f87505f619bf9ea08f26bb34f8118",
            "id": 2,
            "name": "123@qq.com",
            "sign": "",
            "status": "offline",
            "type": "friend",
            "username": "123@qq.com",
            "mine":o
        }
        let cmd = (to.type === 'friend') ? friend_send_cmd : group_send_cmd;
        let data = {
          message_id: messageId(),
          from_user_id: to.mine.id,
          to_id: parseInt(to.id),
          content: to.mine.content
        };
        let msg = createMessage(cmd, data);
        wsSend(msg);
    }
　　 //浏览器是否支持websocket
    // if ("WebSocket" in window) {
    //     try {
    //         //websocket = new WebSocket($("#socketUrl").val());
    //         websocket = new WebSocket("ws://im.nihongdengxia.com/im","eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJodHRwOlwvXC9pbS5uaWhvbmdkZW5neGlhLmNvbVwvIiwiYXVkIjoiaHR0cDpcL1wvaW0ubmlob25nZGVuZ3hpYS5jb21cLyIsImlhdCI6MTYyMzAzNzE4NCwidXNlciI6MX0.7s0gxXlal1Hqbz9naKmlo2fgfNNmz_73jcfySSE4s-k");
    //         websocket.onopen = function(data) {
    //             console.log("connect success :" + data.data);
    //         };

    //         websocket.onmessage = function(data) {
    //             console.log("onmessage : " + data.data);
    //         };

    //         websocket.onerror = function(e) {
    //             console.log('connect error :'+e);
    //         };

    //         websocket.onclose = function(data) {
    //             console.log('connect error :'+data);
    //         };

    //         window.onbeforeunload = function() {
    //             websocket.close();
    //         }

    //     } catch (error) {
    //         console.log('connect error :'+error);
    //     }

    // } else {
    //     console.log("Websockets not supported");
    // }

    // $('.close').click(function() {
    //     if (websocket != null) {
    //         websocket.close();
    //     }
    // });
    </script>
-->
</html>